<template>
  <button :disabled="disabled" class="v-button"
    @click="handleClick"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[btnType, isLarge, isSmall, isDisabled, isLoading, isOutline, isRound]">
    <i class="v-icon-loading" v-if="loading" @click="handleInnerClick"></i>
    <i :class="'v-icon-' + icon" v-if="icon && !loading" @click="handleInnerClick"></i>
    <span v-if="$slots.default" @click="handleInnerClick">
      <slot></slot>
    </span>
  </button>
</template>
<script>
  export default {
    name: 'VButton',
    props: {
      type: {
        type: String,
        default: 'default',
      },
      icon: {
        type: String,
        default: '',
      },
      nativeType: {
        type: String,
        default: 'button',
      },
      large: Boolean,
      small: Boolean,
      loading: Boolean,
      disabled: Boolean,
      outline: Boolean,
      autofocus: Boolean,
      round: Boolean,
    },
    computed: {
      btnType() {
        return this.type ? `v-button--${this.type}` : '';
      },
      isDisabled() {
        return this.disabled ? 'v-button--disabled' : '';
      },
      isLoading() {
        return this.loading ? 'is-loading' : '';
      },
      isOutline() {
        return this.outline ? 'v-button--outline' : '';
      },
      isRound() {
        return this.round ? 'v-button--round' : '';
      },
      isLarge() {
        return this.large ? 'v-button--large' : '';
      },
      isSmall() {
        return this.small ? 'v-button--small' : '';
      },
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      },
      handleInnerClick(evt) {
        if (this.disabled) {
          evt.stopPropagation();
        }
      },
    },
  };
</script>
